<!DOCTYPE html>
<html>
  <head>
    <style>
      #draggableContainer {
        -webkit-user-drag: element;
      }
      #draggableContainer img { 
        -webkit-user-drag: none;
      }
      #drop {
        border: 1px solid black;
        height: 200px;
        width: 200px;
      }
    </style>
    <script>
      function runTest() {
        var drag = document.getElementById('drag');
        var drop = document.getElementById('drop');

        drop.addEventListener('dragenter', onDragEnterOrOver);
        drop.addEventListener('dragover', onDragEnterOrOver);
        drop.addEventListener('drop', onDrop);

        if (!window.testRunner)
          return;

        testRunner.dumpAsText();
        testRunner.waitUntilDone();

        var x;
        var y;

        x = drag.offsetLeft + drag.offsetWidth / 2;
        y = drag.offsetTop + drag.offsetHeight / 2;
        eventSender.mouseMoveTo(x, y);
        eventSender.mouseDown();
        eventSender.leapForward(500);
        x = drop.offsetLeft + drop.offsetWidth / 2;
        y = drop.offsetTop + drop.offsetHeight / 2;
        eventSender.mouseMoveTo(x, y);
        eventSender.mouseUp();
      }

      function onDragEnterOrOver(e) {
        e.preventDefault();
      }

      function onDrop() {
        var console = document.getElementById('console');
        console.appendChild(document.createTextNode('PASS'));
        console.appendChild(document.createElement('br'));

        if (window.testRunner)
          testRunner.notifyDone();
      }
    </script>
  </head>
  <body onload="runTest()">
    <p>This test verifies that starting a drag on an image inside a
    -webkit-user-drag: element container succeeds. To run this test manually,
    try dragging the image to the box below. You should see the word "PASS"
    appear if it succeeds.</p>
    <div id="draggableContainer">
      <img id="drag" src="resources/apple.gif">
    </div>
    <div id="drop"></div>
    <div id="console"></div>
  </body>
</html>
